<style lang="scss" scoped>
@import "@/assets/css/index";
.my {
  width: 100%;
  background-color: $main-bgc-gray;
  min-height: 100%;
  font-size: 1.2rem;
  overflow-y: scroll;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  overflow: hidden;
  $radiusSize: 100%;
  .top_bg {
    width: 140%;
    height: 7rem;
    border-bottom-left-radius: $radiusSize;
    border-bottom-right-radius: $radiusSize;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: $mainColor;
  }
  .wp {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 2rem 1.2rem;
    display: flex;
    flex-direction: column;
    z-index: 2;
    .top-box {
      display: flex;
      justify-content: space-between;
      background-color: white;

      .info {
        display: flex;

        .textInfo {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-left: 1rem;

          .line {
            display: flex;
            justify-content: flex-start;

            .name {
              font-size: 1.6rem;
              font-weight: bold;
              color: $color1;
            }
            .role {
              background-color: #c5e2ff;
              padding: 0.3rem 0.8rem;
              color: #2890f9;
              border-radius: 0.6rem;
              margin-left: 1rem;
              font-size: 1.1rem;
            }
            .other {
              font-size: 1.1rem;
              color: $color2;
            }
          }
        }
      }
    }

    .function-box {
      background-color: white;
      overflow: hidden;

      .myCell {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 1rem;
        .likeIcon {
          flex: 0 0 4rem;
          height: 3rem;
        }
        .label {
          flex: 1;
          margin-left: 1rem;
          font-size: 1.4rem;
        }
        .icon {
          flex: 0 0 3rem;
        }
      }
    }
  }
}
</style>
<template>
  <div class="my" v-if="userInfo">
    <div class="top_bg"></div>
    <div class="wp">
      <div class="top-box padding-all-l border-r-l">
        <div class="info">
          <van-image
            round
            width="4rem"
            height="4rem"
            :src="userInfo.headimgurl||userInfo.avatar"
            @click="toView('/my/ziliao')"
          />
          <div class="textInfo">
            <div class="line">
              <span class="name">{{ userInfo.nickname || "数据获取异常" }}</span>
               <!-- :style="{backgroundColor:}" -->
              <span class="role">{{ userInfo.statusname }}</span>
              <!-- <span class="role" v-if="userInfo.role=='志愿者'">学员</span> -->
            </div>
            <div class="line margT-l">
               <!-- <span class="other">累计课时1小时(待优化)</span> -->
              <span class="other">积分 {{ userInfo.integral || 0 }}分</span>
            </div>
          </div>
        </div>
      </div>
      <div class="function-box margT-l border-r-l">
        <div class="myCell" @click="toView('/my/collect')">
          <img class="likeIcon" src="../../assets/img/my-like.svg" alt="" />
          <span class="label">我的收藏</span>
          <van-icon name="arrow" class="icon" color="#999" size="1.6rem" />
        </div>
        <div class="myCell" @click="toView('/my/study')">
          <img class="likeIcon" src="../../assets/img/my-study.svg" alt="" />
          <span class="label">我的学习库</span>
          <van-icon name="arrow" class="icon" color="#999" size="1.6rem" />
        </div>
        <div
          class="myCell"
          @click="toView('/my/contribution')"
          v-if="userInfo.volunteer == 2"
        >
          <img
            class="likeIcon"
            src="../../assets/img/my-contribution.svg"
            alt=""
          />
          <span class="label">贡献值记录</span>
          <van-icon name="arrow" class="icon" color="#999" size="1.6rem" />
        </div>
        <div class="myCell" @click="toView('/my/jifen')">
          <img class="likeIcon" src="../../assets/img/my-jifen.svg" alt="" />
          <span class="label">积分记录</span>
          <van-icon name="arrow" class="icon" color="#999" size="1.6rem" />
        </div>
        <div class="myCell" @click="toView('/selectCampus?from=my')">
          <img class="likeIcon" src="../../assets/img/my-campus.svg" alt="" />
          <span class="label">我的校区</span>
          <van-icon name="arrow" class="icon" color="#999" size="1.6rem" />
        </div>
        <div class="myCell" @click="toView('/my/ziliao')">
          <img class="likeIcon" src="../../assets/img/my-date.svg" alt="" />
          <span class="label">个人资料</span>
          <van-icon name="arrow" class="icon" color="#999" size="1.6rem" />
        </div>
        <!-- <div class="myCell">
				openid:{{openid}}
		 </div> -->
      </div>
      <!-- <div class="function-box margT-l border-r-l">
		  <div class="myCell" @click="toView('/my/info')">
			 <img class="likeIcon" src="../../assets/img/my-campus.svg" alt="">
			 <span class="label">我的校区</span>
			 <van-icon name="arrow" class="icon" color="#999" size="1.6rem"/>
		  </div>
      </div> -->
      <!-- <div class="function-box margT-l border-r-l">测试openid:{{ openid }}</div> -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { myMixins } from "@/assets/js/mixins.js";
// import wx from 'weixin-js-sdk';
export default {
  name: "my",
  mixins: [myMixins],
  components: {},
  data() {
    return {
      openid: "",
      userInfo: {
        role: "学员",
        avatar:'',
        headimgurl:'',
        nickname:'',
        statusname:'',
        integral:'',
        volunteer:'',
      },
    };
  },
  filters: {},
  mounted() {
    // this.openid = process.env.node_env == "production" ? localStorage.getItem("openid") : this.$store.state.openid;
    // if (this.openid) {
    //   this.MemberH5Items(this.openid);
    // }
    this.openid = localStorage.getItem("openid") || this.$store.state.openid;
    console.log("this.openid",this.openid)
    if (this.openid) {
      this.MemberH5Items(this.openid);
    }else{
      if(process.env.NODE_ENV === 'production'){
        console.log("getWeixinConfig")
        this.getWeixinConfig()
      }
    }
  },
  methods: {
    getWeixinConfig() {
      const _this = this;
      let params = {};
      _this.$request.getWeixinConfig(params).then((res) => {
        _this.$store.commit("setAppid", res.data.value.appid);
        _this.$store.commit("setSecret", res.data.value.secret);
        console.log("getcode")
        _this.getcode(res.data.value.appid);
      });
    },
    getcode(appid) {
      // 非静默授权，第一次有弹框
      const _this = this;
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openid
      localStorage.setItem('code',code)
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        _this.$store.commit("setcode", code);
        console.log("getOpenId")
        _this.getopenid(code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getopenid(code) {
      const _this = this;
      let params = {
        appid: _this.$store.state.appid,
        secret: _this.$store.state.secret,
        code: code,
      };
      _this.$request.getOpenid(params).then((res) => {
        console.log("getOpenid_res:",res)
        const userinfo = res.data[0];
        const openid = userinfo["openid"];
        // alert("openid:"+openid)
        localStorage.setItem("openid", openid);
        _this.userInfo = userinfo
        console.log("_this.userInfo",_this.userInfo)
        localStorage.setItem("userInfo", JSON.stringify(userinfo));
        if(openid){
          _this.MemberH5Items(openid);
        }
        // _this.getfansitem(item)
      });
    },
    toView(path) {
      this.$router.push(path);
    },
    // 获取个人中心的总数据
    MemberH5Items(openid) {
      let params = {
        openid: openid,
        campus_id: JSON.parse(localStorage.getItem("selectedCampus")).id,
      };
      console.log("getMemberH5Items")
      this.$request.MemberH5Items(params).then((res) => {
        if (res.ret == 200) {
          const userInfo = res.data;
          // if(!this.userInfo.nickname){
          //   window.location.href =
          //   "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          //   appid +
          //   "&redirect_uri=" +
          //   encodeURIComponent(local) +
          //   "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
          // }
          if(JSON.stringify(userInfo).length<50){
            // alert('length<50:',localStorage.getItem('userInfo'))
            this.$router.push("/selectCampus?from=my");
            // localStorage.setItem('openid','')
            // this.$router.push('/home')
            // self.location = '//pysqjy.xiaoqibao.net/index.html#/my'
          }else{
            this.userInfo = userInfo
            console.log("getMemberH5Items_userInfo",this.userInfo)
            //缓存相关数据
            localStorage.setItem("openid", this.userInfo.openid);
            // localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
            localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
            // const selectedCampus = JSON.parse(localStorage.getItem('selectedCampus'))
            // if(!selectedCampus.id){
            //   this.$router.push("/selectCampus?from=my");
            // }
          }
          
          // if(this.userInfo.openid&&this.userInfo.nickname){
          //   localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
          // }
        }
      });
    },
  },
};
</script>
